<template>
  <div class="app">
    <div class="skill">
      <VueDraggable
        @update="onUpdate"
        @add="onAdd"
        @remove="remove"
        :group="{ name: 'skill', pull: 'clone', put: false }"
        :animation="150"
        :clone="clone"
        v-model="list1"
        style="display: flex"
      >
        <div class="item" v-for="(item, index) in list1" :key="index">{{ item.name }}</div>
      </VueDraggable>
    </div>

    <div class="box">
      <VueDraggable
        @update="onUpdate"
        @add="onAdd"
        @remove="remove"
        :group="{ name: 'skill'}"
        :animation="150"
        v-model="list2"
        class="listskill"
      >
        <div class="item" v-for="(item, index) in list2" :key="index">{{ item.name }}</div>
      </VueDraggable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { VueDraggable } from "vue-draggable-plus";

const list1 = ref([
  { name: "python" },
  { name: "java" },
  { name: "C" },
  { name: "php" },
  { name: "html" },
  { name: "go" }
]);

const list2 = ref([]);

function clone(element: Record<"name", string>) {
  for (var i = 0; i < list2.value.length; i++) {
    if (list2.value[i].name == element.name) {
      console.log(list2);
      return null;
    }
  }

  return {
    name: `${element.name}`
  };
}

function onUpdate() {
  console.log("update");
}
function onAdd() {
  console.log("add");
}
function remove() {
  console.log("remove");
}
</script>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
}
.skill {
  margin: 50px;
  height: 300px;
}
.item {
  width: 60px;
  height: 30px;
  padding: 10px;
  margin: 10px;
  background: #ddffe3;
}
.box {
  width: 600px;
  height: 300px;
  border: 1px solid rgb(0, 0, 0);
}
.listskill {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
</style>
